﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags-->
    <!-- Title-->
    <title>News Ten - Blog &amp; Magazine Mobile HTML Template</title>
    <!-- Favicon-->
    <link rel="icon" href="/mobile/default/img/core-img/favicon.ico">
    <!-- Stylesheet-->
    <link rel="stylesheet" href="/mobile/default/css/style.css">
  </head>
  <body>
    <!-- Preloader-->
    <div class="preloader" id="preloader">
      <div class="spinner-grow text-secondary" role="status">
        <div class="sr-only">Loading...</div>
      </div>
    </div>
    <!-- Header Area-->
    <div class="header-area" id="headerArea">
      <div class="container h-100 d-flex align-items-center justify-content-between">
        <!-- Navbar Toggler-->
        <div class="navbar--toggler" id="newstenNavbarToggler"><span></span><span></span><span></span><span></span></div>
        <!-- Logo-->
        <div class="logo-wrapper"><a href="index.html"><img src="/mobile/default/img/core-img/logo.png" alt=""></a></div>
        <!-- Search Form-->
        <div class="search-form"><a href="/search/"><i class="fa fa-search"></i></a></div>
      </div>
    </div>
    <!-- Sidenav Black Overlay-->
    <div class="sidenav-black-overlay"></div>
    <!-- Side Nav Wrapper-->
    <div class="sidenav-wrapper" id="sidenavWrapper">
      <!-- Time - Weather-->
      <div class="time-date-weather-wrapper text-center py-5" style="background-image: url('/mobile/default/img/bg-img/1.jpg')">
        <div class="weather-update mb-4">
          <l class="icon lni lni-cloudy-sun"></l>
          <h4 class="mb-1">92°F</h4>
          <h6 class="mb-0">Dhaka</h6>
          <p class="mb-0">Mostly sunny</p>
        </div>
        <div class="time-date">
          <div id="dashboardDate"></div>
          <div class="running-time d-flex justify-content-center">
            <div id="hours"></div><span>:</span>
            <div id="min"></div><span>:</span>
            <div id="sec"></div>
          </div>
        </div>
      </div>
      <!-- Sidenav Nav-->
      [@fly_user method="userLogin"]
      <ul class="sidenav-nav">
        [#if userLogin??]
        <li><a href="#"><i class="lni lni-user"></i>我的</a></li>
        [/#if]
        <li><a href="#"><i class="lni lni-files"></i>热门<span class="ml-2 badge badge-danger">HOT</span></a></li>
        <li><a href="#"><i class="lni lni-grid-alt"></i>所有分类                <span class="ml-2 badge badge-warning">14+</span></a></li>
        [#if userLogin??]
        <li><a href="#"><i class="lni lni-cog"></i>设置</a></li>
        [/#if]
        <li><a href="/user/login"><i class="lni lni-power-switch"></i>登录</a></li>
      </ul>
      [/@fly_user]
      <!-- Go Back Button-->
      <div class="go-home-btn" id="goHomeBtn"><i class="lni lni-arrow-left"></i></div>
    </div>
    <div class="page-content-wrapper">
      <!-- News Today Wrapper-->
      <div class="news-today-wrapper">
        <div class="container">
          <div class="d-flex align-items-center justify-content-between">
            <h5 class="mb-3 pl-1 newsten-title">News Today</h5>
            <p class="mb-3 line-height-1" id="dashboardDate2"></p>
          </div>
          <!-- Hero Slides-->
          <!-- Hero Slides-->
          <div class="hero-slides owl-carousel">
            <!-- Single Hero Slide-->
            <div class="single-hero-slide" style="background-image: url('/mobile/default/img/bg-img/4.jpg')">
              <!-- Background Shape-->
              <div class="background-shape">
                <div class="circle2"></div>
                <div class="circle3"></div>
              </div>
              <div class="slide-content h-100 d-flex align-items-end">
                <div class="container-fluid mb-3">
                  <div class="video-icon"><i class="lni lni-play"></i></div><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a><a class="post-catagory" href="catagory.html">Politics</a><a class="post-title d-block" href="single.html">Massive riots in the city to establish rule of law</a>
                  <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 lni lni-user"></i>Mayaj</a><a href="#"><i class="mr-1 lni lni-calendar"></i>26 March</a><span><i class="mr-1 lni lni-bar-chart"></i>4 min read</span></div>
                </div>
              </div>
            </div>
            <!-- Single Hero Slide-->
            <div class="single-hero-slide" style="background-image: url('/mobile/default/img/bg-img/2.jpg')">
              <!-- Background Shape-->
              <div class="background-shape">
                <div class="circle2"></div>
                <div class="circle3"></div>
              </div>
              <div class="slide-content h-100 d-flex align-items-end">
                <div class="container-fluid mb-3"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a><a class="post-catagory" href="catagory.html">Fashion</a><a class="post-title d-block" href="single.html">Fashion 2020: How to get the golden skin on the outside</a>
                  <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 lni lni-user"></i>Lim</a><a href="#"><i class="mr-1 lni lni-calendar"></i>23 March</a><span><i class="mr-1 lni lni-bar-chart"></i>9 min read</span></div>
                </div>
              </div>
            </div>
            <!-- Single Hero Slide-->
            <div class="single-hero-slide" style="background-image: url('/mobile/default/img/bg-img/5.jpg')">
              <!-- Background Shape-->
              <div class="background-shape">
                <div class="circle2"></div>
                <div class="circle3"></div>
              </div>
              <div class="slide-content h-100 d-flex align-items-end">
                <div class="container-fluid mb-3"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a><a class="post-catagory" href="catagory.html">Health</a><a class="post-title d-block" href="single.html">Loses over 30kg on keto diet and one meal a day</a>
                  <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 lni lni-user"></i>Nazrul</a><a href="#"><i class="mr-1 lni lni-calendar"></i>21 March</a><span><i class="mr-1 lni lni-bar-chart"></i>3 min read</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Top Catagories Wrapper-->
      <div class="top-catagories-wrapper">
        <div class="bg-shapes">
          <div class="shape1"></div>
          <div class="shape2"></div>
          <div class="shape3"></div>
          <div class="shape4"></div>
          <div class="shape5"></div>
        </div>
        <h6 class="mb-3 catagory-title">推荐小组</h6>
        <div class="container">
          <!-- Catagory Slides-->
          <div class="catagory-slides owl-carousel">
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/8.jpg" alt="">
                <h6>Politics</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/3.jpg" alt="">
                <h6>Fashion</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/6.jpg" alt="">
                <h6>Tech</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/15.jpg" alt="">
                <h6>Lifestyle</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/9.jpg" alt="">
                <h6>Sports</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/10.jpg" alt="">
                <h6>World</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/14.jpg" alt="">
                <h6>Environment</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/13.jpg" alt="">
                <h6>People</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/19.jpg" alt="">
                <h6>Gadgets</h6></a></div>
            <!-- Catagory Card-->
            <div class="card catagory-card"><a href="#"><img src="/mobile/default/img/bg-img/7.jpg" alt="">
                <h6>Health</h6></a></div>
          </div>
        </div>
      </div>
      <!-- Trending News Wrapper-->
      <div class="trending-news-wrapper">
        <div class="container">
          <div class="d-flex align-items-center justify-content-between mb-3">
            <h5 class="mb-0 pl-1 newsten-title">推荐话题</h5><a class="btn btn-primary btn-sm" href="/recommend/">全部</a>
          </div>
        </div>
        <div class="container">
          [@fly_topic method="recommend" tj="1" pageSize="4"]
          [#list recommend.list as list]
          <!-- Single Trending Post-->
          <div class="single-trending-post d-flex">
            <div class="post-thumbnail"><img src="/mobile/default/img/bg-img/11.jpg" alt=""></div>
            <div class="post-content"><a class="post-title" href="/topic/${list.id!}/">${list.title!}</a>
              <div class="post-meta d-flex align-items-center">
                [@fly_group method="groupInfo" id='${list.groupId!}']
                <a href="/g-${groupInfo.shortUrl}">${groupInfo.groupName!}</a>
                [/@fly_group]
                <a href="/topic/${list.id!}/">[@time_format time=list.createTime?string("yyyy-MM-dd HH:mm:ss")!/]</a></div>
            </div>
          </div>
          [/#list]
          [/@fly_topic]
        </div>
      </div>
      <!-- Editorial Choice News Wrapper-->
      <div class="editorial-choice-news-wrapper">
        <!-- Background Shapes-->
        <div class="bg-shape1"><img src="/mobile/default/img/core-img/edito.png" alt=""></div>
        <div class="bg-shape2" style="background-image: url('/mobile/default/img/core-img/edito2.png')"></div>
        <div class="container">
          <div class="editorial-choice-title text-center mb-4"><i class="lni lni-protection"></i>
            <h6 class="newsten-title">Editorial Choice</h6>
          </div>
        </div>
        <div class="container">
          <!-- Editorial Choice News Slide-->
          <div class="editorial-choice-news-slide owl-carousel">
            <!-- Single Slide-->
            <div class="single-editorial-slide d-flex"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a>
              <div class="post-thumbnail">
                <div class="video-icon"><i class="lni lni-play"></i></div><img src="/mobile/default/img/bg-img/9.jpg" alt="">
              </div>
              <div class="post-content"><a class="post-catagory" href="#">Sports</a><a class="post-title d-block" href="single.html">Basketball is becoming popular young people</a>
                <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 fa fa-user-o"></i>Nazrul</a><a href="#"><i class="mr-1 fa fa-clock-o"></i>30 March</a></div>
              </div>
            </div>
            <!-- Single Slide-->
            <div class="single-editorial-slide d-flex"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a>
              <div class="post-thumbnail"><img src="/mobile/default/img/bg-img/14.jpg" alt=""></div>
              <div class="post-content"><a class="post-catagory" href="#">Environment</a><a class="post-title d-block" href="single.html">We are responsible for environment pollution</a>
                <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 fa fa-user-o"></i>Nazrul</a><a href="#"><i class="mr-1 fa fa-clock-o"></i>16 March</a></div>
              </div>
            </div>
            <!-- Single Slide-->
            <div class="single-editorial-slide d-flex"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a>
              <div class="post-thumbnail">
                <div class="video-icon"><i class="lni lni-play"></i></div><img src="/mobile/default/img/bg-img/15.jpg" alt="">
              </div>
              <div class="post-content"><a class="post-catagory" href="#">Cooking</a><a class="post-title d-block" href="single.html">How to make a crunchy toast biscuit in home</a>
                <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 fa fa-user-o"></i>Nazrul</a><a href="#"><i class="mr-1 fa fa-clock-o"></i>24 March</a></div>
              </div>
            </div>
            <!-- Single Slide-->
            <div class="single-editorial-slide d-flex"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a>
              <div class="post-thumbnail"><img src="/mobile/default/img/bg-img/10.jpg" alt=""></div>
              <div class="post-content"><a class="post-catagory" href="#">World</a><a class="post-title d-block" href="single.html">World most top building is situated in New York city</a>
                <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 fa fa-user-o"></i>Nazrul</a><a href="#"><i class="mr-1 fa fa-clock-o"></i>22 March</a></div>
              </div>
            </div>
            <!-- Single Slide-->
            <div class="single-editorial-slide d-flex"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a>
              <div class="post-thumbnail">
                <div class="video-icon"><i class="lni lni-play"></i></div><img src="/mobile/default/img/bg-img/13.jpg" alt="">
              </div>
              <div class="post-content"><a class="post-catagory" href="#">People</a><a class="post-title d-block" href="single.html">Massive riots in the city to establish rule of law</a>
                <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 fa fa-user-o"></i>Nazrul</a><a href="#"><i class="mr-1 fa fa-clock-o"></i>17 March</a></div>
              </div>
            </div>
            <!-- Single Slide-->
            <div class="single-editorial-slide d-flex"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a>
              <div class="post-thumbnail"><img src="/mobile/default/img/bg-img/6.jpg" alt=""></div>
              <div class="post-content"><a class="post-catagory" href="#">Gadgets</a><a class="post-title d-block" href="single.html">International Robot Olympiad was held in March 2020</a>
                <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 fa fa-user-o"></i>Nazrul</a><a href="#"><i class="mr-1 fa fa-clock-o"></i>15 March</a></div>
              </div>
            </div>
            <!-- Single Slide-->
            <div class="single-editorial-slide d-flex"><a class="bookmark-post" href="#"><i class="lni lni-bookmark"></i></a>
              <div class="post-thumbnail"><img src="/mobile/default/img/bg-img/7.jpg" alt=""></div>
              <div class="post-content"><a class="post-catagory" href="#">Health</a><a class="post-title d-block" href="single.html">Loses over 30kg on keto diet and one meal a day</a>
                <div class="post-meta d-flex align-items-center"><a href="#"><i class="mr-1 fa fa-user-o"></i>Nazrul</a><a href="#"><i class="mr-1 fa fa-clock-o"></i>19 March</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- For You News Wrapper-->
      <div class="for-you-news-wrapper">
        <div class="container">
          <div class="d-flex align-items-center justify-content-between">
            <h5 class="mb-0 pl-1 newsten-title">热门圈子</h5><a class="btn btn-primary btn-sm" href="/group/">全部</a>
          </div>
        </div>
        <div class="container">
          <div class="row">
            [@fly_group method="paginate" pageSize="4"]
            [#list paginate.list as list]
            <!-- Single Recommended Post-->
            <div class="col-6 col-md-4">
              <div class="single-recommended-post mt-3"><a class="bookmark-post" href="/g-${list.shortUrl!}/"><i class="lni lni-bookmark"></i></a>
                <div class="post-thumbnail"><img src="/mobile/default/img/bg-img/18.jpg" alt=""></div>
                <div class="post-content">
                  <a class="post-catagory" href="/g-${list.shortUrl!}/">${list.groupName!}</a>
                  <a class="post-title" href="single.html">Lemon is useful to lose weight</a></div>
              </div>
            </div>
            [/#list]
            [/@fly_group]
          </div>
        </div>
      </div>
      <!-- Tabs News Wrapper-->
      <div class="tabs-news-wrapper bg-gray">
        <div class="container">
          <nav>
            <!-- Nav Tabs-->
            <div class="nav nav-tabs" id="nav-tab" role="tablist"><a class="nav-item nav-link" id="nav-newest-tab" href="#nav-newest" data-toggle="tab" role="tab" aria-controls="nav-newest" aria-selected="true">最新</a><a class="nav-item nav-link active" id="nav-popular-tab" href="#nav-popular" data-toggle="tab" role="tab" aria-controls="nav-popular" aria-selected="false">热门</a><a class="nav-item nav-link" id="nav-featured-tab" href="#nav-featured" data-toggle="tab" role="tab" aria-controls="nav-featured" aria-selected="false">推荐</a></div>
          </nav>
          <!-- Tabs Content-->
          <div class="tab-content" id="nav-tabContent">
            <!-- Single Tab Pane-->
            <div class="tab-pane fade" id="nav-newest" role="tabpanel" aria-labelledby="nav-newest-tab">
              [@fly_topic method="paginate" status="2" audit="0" pageSize="3"]
              [#list paginate.list as list]
              [@fly_user method="user" id = list.userId]
              <!-- Single News Post-->
              <div class="single-news-post d-flex align-items-center">
                <div class="post-thumbnail">
                  <div class="video-icon"><i class="lni lni-play"></i></div><img src="/mobile/default/img/bg-img/20.jpg" alt="">
                </div>
                <div class="post-content"><a class="post-title" href="/topic/${list.id!}/">${list.title!}</a>
                  <div class="post-meta d-flex align-items-center"><a href="#">9 min ago</a></div>
                </div>
              </div>
              [/@fly_user]
              [/#list]
              [/@fly_topic]
            </div>
            <!-- Single Tab Pane-->
            <div class="tab-pane fade show active" id="nav-popular" role="tabpanel" aria-labelledby="nav-popular-tab">
              [@fly_topic method="paginate" status="2" audit="0" sort="weight" order="desc" pageSize="3"]
              [#list paginate.list as list]
              [@fly_user method="user" id = list.userId]
              <!-- Single News Post-->
              <div class="single-news-post d-flex align-items-center">
                <div class="post-thumbnail"><img src="/mobile/default/img/bg-img/23.jpg" alt=""></div>
                <div class="post-content"><a class="post-title" href="/topic/${list.id!}/">${list.title!}</a>
                  <div class="post-meta d-flex align-items-center"><a href="#">Camel</a><a href="#">2 Comments</a></div>
                </div>
              </div>
              [/@fly_user]
              [/#list]
              [/@fly_topic]
            </div>
            <!-- Single Tab Pane-->
            <div class="tab-pane fade" id="nav-featured" role="tabpanel" aria-labelledby="nav-featured-tab">
              [@fly_topic method="recommend" tj="1" status="2" audit="0" pageSize="3"]
              [#list recommend.list as list]
              [@fly_user method="user" id = list.userId]
              <!-- Single News Post-->
              <div class="single-news-post d-flex align-items-center">
                <div class="post-thumbnail"><img src="/mobile/default/img/bg-img/26.jpg" alt=""></div>
                <div class="post-content"><a class="post-title" href="/topic/${list.id!}/">${list.title!}</a>
                  <div class="post-meta d-flex align-items-center"><a href="#">Mayaj</a><a href="#">9 min read</a></div>
                </div>
              </div>
              [/@fly_user]
              [/#list]
              [/@fly_topic]
            </div>
          </div>
        </div>
      </div>
      <!-- Popular Tags-->
      <div class="popular-tags-wrapper">
        <div class="container">
          <h5 class="mb-3 pl-2 newsten-title">热门标签</h5>
        </div>
        <div class="container">
          <!-- Popular Tags List-->
          <div class="popular-tags-list">
            [@fly_label method="paginate" pageSize="10"]
            [#list paginate.list as list]
            <a class="btn btn-sm m-1" href="/t/${list.shortUrl!}">#${list.title!}</a>
            [/#list]
            [/@fly_label]
<!--            <a class="btn btn-success btn-sm m-1" href="#">#Fashion</a>
            <a class="btn btn-warning btn-sm m-1" href="#">#Tech</a><a class="btn btn-danger btn-sm m-1" href="#">#Lifestyle</a><a class="btn btn-info btn-sm m-1" href="#">#Sports</a><a class="btn btn-success btn-sm m-1" href="#">#World</a><a class="btn btn-warning btn-sm m-1" href="#">#Environment</a><a class="btn btn-danger btn-sm m-1" href="#">#People</a><a class="btn btn-info btn-sm m-1" href="#">#Gadgets</a><a class="btn btn-success btn-sm m-1" href="#">#Health</a><a class="btn btn-primary btn-sm m-1" href="#">#Wildlife</a>-->
          </div>
        </div>
      </div>
    </div>
    <!-- Footer Nav-->
    <div class="footer-nav-area" id="footerNav">
      <div class="newsten-footer-nav h-100">
        <ul class="h-100 d-flex align-items-center justify-content-between">
          <li class="active"><a href="/"><i class="lni lni-home"></i></a></li>
          <li><a href="#"><i class="lni lni-grid-alt"></i></a></li>
          <li><a href="#"><i class="lni lni-bolt-alt"></i></a></li>
          <li><a href="#"><i class="lni lni-heart"></i></a></li>
          <li><a href="#"><i class="lni lni-bookmark"></i></a></li>
        </ul>
      </div>
    </div>
    <!-- All JavaScript Files-->
    <script src="/mobile/default/js/jquery.min.js"></script>
    <script src="/mobile/default/js/popper.min.js"></script>
    <script src="/mobile/default/js/bootstrap.min.js"></script>
    <script src="/mobile/default/js/waypoints.min.js"></script>
    <script src="/mobile/default/js/jquery.easing.min.js"></script>
    <script src="/mobile/default/js/owl.carousel.min.js"></script>
    <script src="/mobile/default/js/jquery.animatedheadline.min.js"></script>
    <script src="/mobile/default/js/jquery.counterup.min.js"></script>
    <script src="/mobile/default/js/wow.min.js"></script>
    <script src="/mobile/default/js/default/date-clock.js"></script>
    <script src="/mobile/default/js/default/dark-mode-switch.js"></script>
    <script src="/mobile/default/js/default/active.js"></script>
  </body>
</html>